<template>
    <div class="nav">
        <div class="nav-left">
            <img src="../assets/logo.svg" alt="log" />
            <el-select v-model="value" @change="handleKey">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="nav-right">
            
                <img v-if="isLogin" @click="handleLogout" class="nav-right-avatar" :src="avatarUrl"  />
           
            <el-button v-else @click="handleLogin">登录</el-button>
        </div>
        
    </div>
    <WrapperLogin ref="wrapper-login" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { WrapperLogin } from '../components';

import { mapState } from 'vuex';

import { cosMap } from '../config';

export default defineComponent({
    name: 'Nav',
    components: {
        WrapperLogin
    },
    data() {
        return {
            isShow: false,
            isLogin: sessionStorage.getItem('token') ? true : false,
            avatarUrl: 'tgcos/582717604620:epnoss-antd-fe/user/v-user-defAvatar.png',
            options: [
                {
                    value: 'veeui',
                    label: '维李设论团队图床'
                }
            ]
        }
    },
    watch: {
        '$store.state.key': {
            handler(val, oldVal) {
                this.handleKey(val)
            },
            immediate: true
        },
        '$route.params.id': {
            handler(val, oldVal) {
                console.log('$route.params.id', val)
                let id = val;
                if(Array.isArray(val)) {
                    this.$route.params.id = val[0]
                    id = val[0]
                }
                const k = Object.entries(cosMap).filter(f => f[1].includes(id))[0][0];
                this.$store.commit('changeKey', k)
            }
        }
    },
    methods: {
        handleLogin() {
            this.$refs[`wrapper-login`].handleOpen()
        },
        handleLogout() {
            sessionStorage.removeItem('token');
            this.$message.success('退出成功');
            this.$router.go(0)
        },
        handleKey(v) {
            this.$store.commit('changeKey', v)
            this.$router.push(`/page/${cosMap[v][0]}`)
        }
    },
    computed: {
        ...mapState({
            value: state => state.key
        })
    }
})
</script>

<style lang="scss">
.nav {
    height: 4rem;
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #dadada;
    display: flex;
    justify-content: space-around;
    align-items: center;

    &-left {
        flex: 8;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        img {
            height: 2.5rem;
            margin-left: 1rem;
        }
        h1 {
            font-size: 1.75rem;
            margin-left: 1rem;
            color: #333;
            width: 20rem;
            text-overflow: ellipsis;
        }
        .el-select {
            margin-left: 1rem;
            width: 10rem;
        }
    }

    &-right {
        flex: 16;
        display: flex;
        justify-content: right;
        align-items: center;
        .nav-right-avatar {
            height: 3rem;
            width: 3rem;
            margin-right: 1rem;
        }
        .nav-right-avatar:hover {
            cursor: pointer;
        }
        .el-button {
            margin-right: 1rem;
        }
    }
}
</style>